<template>
  <div class="my-tasks-container">
    <div class="my-tasks">
      <h2>我的任务</h2>
      <ul class="no-style">
        <li v-for="task in articleList" :key="task.aid" class="task-item">
          <div class="task-image-container">
            <img :src="defaultimg" alt="任务图片" class="task-image" />
          </div>
          <div class="task-content">
            <div class="task-header">
              <router-link :to="`/login/my-tasks/tasks/${task.aid}`" class="task-title-link" :title="task.articleTitle">
                <h3 class="task-title">

                  {{ task.articleTitle }}
                </h3>
              </router-link>
              <!-- <span class="task-date">时间</span> -->
            </div>
            <div class="task-stats">
              <span>状态：{{ task.state }}</span>
              <button class="delete-button" @click="deleteTask(task.aid)">删除</button>
            </div>
          </div>
        </li>
      </ul>
    </div>


  </div>
</template>
  
<script setup>
import { ref } from 'vue';
import { onMounted } from 'vue';
import api from '../../api/api.js';

import { userStore } from '../../stores/userStore.js'


//数据定义
const articleList = ref([
  {
    aid: 0,
    articleTitle: "标题",
    views: 0,
    state:"wait"
  }
]);
const defaultimg=ref('https://tse1-mm.cn.bing.net/th/id/OIP-C.tk4MkENFUP-MTyLzPdA6fgHaHa?w=161&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7')

const userInfo=userStore()
const {userid} = userInfo

//获取用户任务列表
const getArticles = async () => {
  try{
    const res=await api.searchSelfMissionApi({})
    articleList.value=res.data.datalist
  }catch(error){
    console.error("获取用户任务列表失败",error);
  }
};
// 截断标题的函数
function truncateTitles() {
  let length=articleList.value.length;
  for(let i=0;i<length;i++){
    if(articleList.value[i].articleTitle.length>30){
      articleList.value[i].articleTitle=articleList.value[i].articleTitle.substring(0,27)+'...'
    }
  }
}

//组件加载完成后获取文章列表
onMounted(async()=>{
  try {
    await getArticles()

    // 截断标题
    truncateTitles()
  } catch (error) {
    console.error("组件加载完成后获取文章列表失败",error);
  }
})


const deleteTask = async(id) => {
  try {
    await api.deleteArticleApi({aid: id})

    // 刷新文章列表
    await getArticles()
    truncateTitles()
  } catch (error) { 
    console.error("删除文章失败", error);
  }
};
</script>
  
<style scoped lang="less">
.router-link-active {
  text-decoration: none;
  color: #fff;
}

a {
  text-decoration: none;
  color: #fff;
}

.my-tasks-container {
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 8px;
  max-width: 800px;
  margin: auto;
  position: relative;
  min-height: 500px;
}

.my-tasks {
  h2 {
    text-align: center;
    color: #333;
    margin-bottom: 10px;
    /* 调整段落之间的间距 */
  }

  .task-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    margin-bottom: 10px;
    width: 95%;

    .task-image-container {
      width: 75px;
      height: 75px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
    }

    .task-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
    }

    .task-content {
      flex: 1;

      .task-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .task-title {
          font-size: 1.1em;
          color: #333;
          font-weight: bold;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

        }

        .task-title:hover {
          color: #F04143;
          /* 鼠标悬浮时文字变成红色 */
        }

        .task-date {
          color: #999;
          font-size: 0.9em;
        }
      }

      .task-stats {
        display: flex;
        align-items: center;
        margin-top: 8px;
        font-size: 0.9em;
        color: #666;

        span {
          margin-right: 15px;
        }

        .delete-button {
          margin-left: auto;
          background-color: #ccc;
          color: white;
          border: none;
          padding: 5px 10px;
          cursor: pointer;
          border-radius: 4px;

          &:hover {
            background-color: #bbb;
          }
        }
      }
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;

  button {
    background: #007BFF;
    color: white;
    border: none;
    padding: 8px 16px;
    margin: 0 5px;
    cursor: pointer;

    &:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
  }
}
</style>
  